<template>
  <div class="pager-container">
    <div class="pager-container-inner">
      <div class="btn-wrap">
        <el-button type="primary" @click="handleEdt()">资产录入</el-button>
        <el-button type="primary" @click="handleCreatAccount()">新建账户</el-button>
        <el-button type="success" @click="handleImportNw()">从女娲导入</el-button>
      </div>
      <bs-form form-type="query" :model="queryForm">
        <bs-form-item class="ctrl-form-item" label="设备名">
          <el-icon class="arrow" :class="{more: moreCondition}" @click="handleMoreCondition()"><CaretRight /></el-icon>
          <bs-input placeholder="请输入设备名" v-model="queryForm.name"></bs-input>
        </bs-form-item>
        <bs-form-item label="管理IP">
          <bs-input v-model="queryForm.manage_ip" placeholder="请输入设备名"></bs-input>
        </bs-form-item>
        <bs-form-item label="供应商">
          <bs-select v-model="queryForm.vendor_name">
            <bs-option v-for="(item, index) in optionList.vendor" :key="index" :value="item.value" :label="item.label"></bs-option>
          </bs-select>
        </bs-form-item>
        <bs-form-item label="机房">
          <bs-select v-model="queryForm.room" @change="handleRoomChange">
            <bs-option v-for="(item, index) in optionList.room" :key="index" :value="item.value" :label="item.label"></bs-option>
          </bs-select>
        </bs-form-item>
        <template v-if="moreCondition">
          <bs-form-item label="模块">
            <bs-select v-model="queryForm.model"  @change="handleModelChange">
              <bs-option v-for="(item, index) in optionList.model" :key="index" :value="item.value" :label="item.label"></bs-option>
            </bs-select>
          </bs-form-item>
          <bs-form-item label="机柜">
            <bs-select v-model="queryForm.rack_name">
              <bs-option v-for="(item, index) in optionList.rack" :key="index" :value="item.value" :label="item.label"></bs-option>
            </bs-select>
          </bs-form-item>
          <bs-form-item label="区域">
            <bs-select v-model="queryForm.netzone_name">
              <bs-option v-for="(item, index) in optionList.netzone" :key="index" :value="item.value" :label="item.label"></bs-option>
            </bs-select>
          </bs-form-item>
          <bs-form-item label="序列号">
            <bs-input placeholder="请输入序列号" v-model="queryForm.serial_num"></bs-input>
          </bs-form-item>
          <bs-form-item label="U位">
            <bs-input placeholder="起始U位" v-model="queryForm.u_location_start"></bs-input>
          </bs-form-item>
          <bs-form-item label="归属人">
            <bs-input placeholder="请输入归属人域账号" v-model="queryForm.manager_name"></bs-input>
          </bs-form-item>
          <bs-form-item class="ctrl-form-item" label="搜索">
            <bs-input placeholder="请输入关键字" :suffix-icon="Search"></bs-input>
          </bs-form-item>
        </template>
        <bs-form-item class="form-item-btns">
          <el-button type="primary" @click="handleSearch()">查询</el-button>
          <el-button @click="handleReset()">重置</el-button>
        </bs-form-item>
      </bs-form>
      <div class="table-content">
        <bs-table ref="tableRef" :get-data="getList" :columns="columns" :data="tableData"></bs-table>
      </div>
    </div>
    <EditServer ref="editRef"/>
    <EditAccount ref="accountRef" />
  </div>
</template>
<script setup lang="ts">
import {reactive, ref, h, onMounted} from 'vue'
import { Search } from '@element-plus/icons-vue'
import BsTable from '@/components/table/BsTable.vue'
import ColDetail from './components/server/ColDetail.vue'
import EditServer from './components/server/EditServer.vue'
import EditAccount from './components/server/EditAccount.vue'
import {useOption} from './hooks/network'
import {delEmptyProp} from '@/utils'
import * as API from '@/service/modules/resource'
import {useRouter} from 'vue-router'
const router = useRouter()

const queryForm = reactive<Record<string, string>>({
  name: '',
  manage_ip: '',
  serial_num: '',
  framework_name: '',
  vendor_name: '',
  category_name: '',
  model_name: '',
  attribute_name: '',
  room: '',
  model: '',
  rack_name: '',
  u_location_start: '',
  role_name: '',
  netzone_name: '',
  status: ''
})
const {optionList, getOptionList, getModelOption, getRackOption, clearOption} = useOption()
const editRef = ref()
const accountRef = ref()
const tableData = ref<any[]>([{}])
const tableRef = ref()
const moreCondition = ref(true)

const handleRoomChange = (val:any) => {
  queryForm.model = ''
  queryForm.rack_name = ''
  clearOption('model')
  clearOption('rack')
  if (val) {
    getModelOption({datacenterss: val})
  }
}

const handleModelChange = (val:any) => {
  queryForm.rack_name = ''
  clearOption('rack')
  if (val) {
    getRackOption({datacenterss: queryForm.room, models: val})
  }
}

const columns:ColumnItem[] = [
  {
    type: 'expand',
    prop: 'expand',
    renderExpand: (row) => {
      return h(ColDetail, {item: row})
    }
  },
  {
    label: '设备名称',
    prop: 'names',
    width: 120,
  },
  {
    label: '管理IP',
    prop: 'manage_ips',
    width: 120
  },
  {
    label: '厂商',
    prop: 'vendor_names'
  },
  {
    label: '型号',
    prop: ''
  },
  {
    label: '类型',
    prop: 'asset_type'
  },
  {
    label: '宿主机',
    prop: ''
  },
  {
    label: '归属人',
    prop: 'manager_name'
  },
  {
    label: '用途',
    prop: 'purpose'
  },
  {
    label: '操作系统',
    prop: 'system',
    width: 120
  },
  {
    label: '机房',
    prop: 'idc_names'
  },
  {
    label: '机柜',
    prop: 'rack_namess'
  },
  {
    label: 'U位',
    prop: 'u_location'
  },
  {
    label: '操作',
    prop: '',
    width: 180,
    fixed: 'right',
    bodyOptions: {
      type: 'button',
      bind (row, _index) {
        return {
          buttons: [{
            text: '编辑',
            onClick: () => {
              handleEdt(row)
            }
          }, {
            text: '扫描',
            onClick: () => {
            }
          }, {
            text: 'WEBSSH',
            onClick: async () => {
              const res:any = await API.getSshConfig({
                manage_ips: row.manage_ip
              }, 'network_device_webssh')
              const url = router.resolve({
                path: '/ssh',
                query: {
                  route: 'server_ssh',
                  id: row.id,
                  remote_ip: res.data.remote_ip,
                  manage_ip: row.manage_ip
                }
              })
              window.open(url.fullPath, '_blank')
            }
          }]
        }
      }
    }
  }
]

const handleMoreCondition = () => {
  moreCondition.value = !moreCondition.value
}

/**资产录入、编辑 */
const handleEdt = (item?:any) => {
  editRef.value.open(item)
}
/**
 * 从女娲导入
 */
const handleImportNw = () => {
}

/**
 * 新建账户
 */
const handleCreatAccount = () => {
  accountRef.value.open()
}

/**
 * 获取表格数据
 */
const getList = async (tableParams:TableDataParam) => {
  const params = {
    cc: 'server-device',
    start: tableParams.start,
    limit: tableParams.limit,
    ...delEmptyProp(queryForm)
  }
  const res:any = await API.getResourceList(params)
  tableData.value = res.data
  return {
    total: res.total
  }
}

const handleReset = () => {
  for (let key in queryForm) {
    queryForm[key] = ''
  }
  clearOption('model')
  clearOption('rack')
  handleSearch()
}

const handleSearch = () => {
  tableRef.value.queryData()
}

onMounted(() => {
  getOptionList()
  handleSearch()
})
</script>
<style lang="scss" scoped>
.btn-wrap {
  margin-bottom: 16px;
  text-align: right;
}
.ctrl-form-item {
  position: relative;
  .arrow {
    z-index: 1;
    position: absolute;
    left: -80px;
    top: 12px;
    cursor: pointer;
    transition: .5s;
    &.more {
      transform: rotate(90deg);
    }
  }
}
</style>
